<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- BEGIN HEADER -->
    [#include "/admin/include/style.ftl"]
    <style type="text/css">
        * {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 14px;
            text-decoration: none;
            color: black;
            outline: none;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        .main {

            height: 800px;
            width: 1005px;
            margin: auto;
            box-shadow: 0 0 3px 5px #e1e1e1;
        }

        .main .top {
            width: 1005px;
            height: 60px;
            background-color: #3bb4f2;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        .main .top .top-left {
            height: 100%;
            width: 200px;
            float: left;
            position: relative;
        }

        .main .top .top-left .header {
            height: 48px;
            width: 48px;
            border-radius: 50%;
            background-image: url("../img/header.jpg");
            line-height: 60px;
            display: inline-block;
            margin: 6px;
            border: 1px solid transparent;
        }

        .main .top .top-left .header:hover {
            border: 1px solid white;
        }

        .main .top .top-left .search {
            display: inline-block;
            height: 30px;
            position: absolute;
            margin: 17px 14px;
        }

        .main .top .top-left .search input {
            display: inline-block;
            width: 110px;
            height: 30px;
            border-radius: 40px;
            border: 1px solid ghostwhite;
            text-indent: 40px;
            background-color: #3bb4f2;

        }

        .main .top .top-left .search input:hover {
            border: 1px solid white;
        }

        .main .top .top-left .search .icon-sear {

            background-image: url("../img/sou.png");
            background-size: 100% 100%;
            height: 30px;
            width: 30px;
            position: absolute;
            margin-top: -31px;
            margin-left: 7px;

        }

        .main .top .top-type {
            height: 100%;
            width: 200px;
            float: left;
            margin-left: 200px;
        }

        .main .top .top-type a.icon-site {
            display: inline-block;
            height: 40px;
            width: 40px;
            background-size: 100% 100%;
            margin: 10px 11px;
        }

        .main .top .top-type .news {
            background-image: url("../img/news.png");

        }

        .main .top .top-type .friend {
            background-image: url("../img/friend.png");

        }

        .main .top .top-type .file {
            background-image: url("../img/file.png");

        }

        .main .top .top-right {
            height: 100%;
            width: 200px;
            float: right;
        }

        .main .top .top-right i.ic-same {
            display: inline-block;
            height: 20px;
            width: 20px;
            background-size: 100% 100%;
            margin: 19px 7px;
        }

        .main .top .top-right i.ic-same.ic-menu {
            margin-left: 48px;
        }

        .main .top .top-right .ic-menu {

            background-image: url("../img/menu.png");
        }

        .main .top .top-right .ic-menu:hover {
            background-image: url("../img/menu (1).png");
        }

        .main .top .top-right .ic-shrink {
            background-image: url("../img/shrink.png");
        }

        .main .top .top-right .ic-shrink:hover {
            background-image: url("../img/shrink (1).png");
        }

        .main .top .top-right .ic-boost {
            background-image: url("../img/boost.png");
        }

        .main .top .top-right .ic-boost:hover {
            background-image: url("../img/boost (1).png")
        }

        .main .top .top-right .ic-close {
            background-image: url("../img/close.png");
        }

        .main .top .top-right .ic-close:hover {
            background-image: url("../img/close (1).png");
        }

        .main .box {
            width: 100%;
            height: 740px;

            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .main .box .chat-list {
            float: left;
            width: 170px;
            height: 100%;
            background-color: #f4f4f4;
        }

        .main .box .chat-list .list-box {
            height: 80px;
            width: 170px;
        }

        .main .box .chat-list .list-box.select {
            background-color: #dbdbdb;
        }

        .main .box .chat-list .list-box:hover {
            background-color: #dbdbdb;
        }

        .main .box .chat-list .list-box img.chat-head {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            border: 1px solid #f4f4f4;
            margin: 15px 10px;
        }

        .main .box .chat-list .list-box .chat-rig {
            float: right;
            height: 50px;
            width: 100px;
            margin: 15px 0;
        }

        .main .box .chat-list .list-box .chat-rig .title {
            font-weight: 500;
            font-size: 17px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-top: 10px;
        }

        .main .box .chat-list .list-box .chat-rig .text {
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #6C6C6C;
            margin-top: 12px;
        }

        .main .box .box-right {
            float: left;
            width: 600px;
            height: 100%;
        }

        .main .box .box-right .recvfrom {
            width: 600px;
            height: 450px;

        }

        .main .box .box-right .recvfrom .nav-top {
            height: 45px;
            width: 100%;
        }

        .main .box .box-right .recvfrom .nav-top p {
            line-height: 45px;
            font-size: 18px;
            font-weight: 600;
            margin-left: 25px;
        }

        .main .box .box-right .recvfrom .news-top {
            height: 440px;
            border: 1px solid #6C6C6C;
            overflow-y: scroll;
        }

        .main .box .box-right .recvfrom .news-top ul {
            height: 100%;
            width: 100%;
        }

        .main .box .box-right .recvfrom .news-top ul li {
            margin: 10px;
            min-height: 80px;
            position: relative;
            overflow: hidden;

        }

        .main .box .box-right .recvfrom .news-top ul li .avatar img {
            height: 30px;
            width: 30px;
            margin-top: 12px;
            border-radius: 50%;
        }

        .main .box .box-right .recvfrom .news-top ul li .msg {
            top: -8px;
            margin: 8px;
            min-height: 80px;
        }

        .main .box .box-right .recvfrom .news-top ul li::after {
            clear: both;
            content: "";
            display: inline-block;
        }

        .main .box .box-right .recvfrom .news-top ul li .msg .msg-text {
            background-color: #6C6C6C;
            border-radius: 5px;
            padding: 8px;
        }

        .main .box .box-right .recvfrom .news-top ul li .msg time {
            float: right;
            color: #ccc;
        }

        .main .box .box-right .recvfrom .news-top ul li.other .avatar {
            position: absolute;
            left: 0;
            top: 0;
        }

        .main .box .box-right .recvfrom .news-top ul li.other .msg {
            position: absolute;
            left: 40px;

        }

        .main .box .box-right .recvfrom .news-top ul li.self .avatar {
            position: absolute;
            right: 0;
            top: 0;
        }

        .main .box .box-right .recvfrom .news-top ul li.self .msg {
            position: absolute;
            right: 38px;
        }

        .main .box .box-right .sendto {
            width: 600px;
            height: 180px;
        }

        .main .box .box-right .sendto .but-nav {
            height: 40px;
        }

        .main .box .box-right .sendto .but-nav ul li {
            float: left;
            height: 22px;
            width: 22px;
            margin: 7px 15px;
            background-size: 100% 100%;
        }

        .main .box .box-right .sendto .but-nav ul li:hover {
            background-color: #dbdbdb;
        }

        .main .box .box-right .sendto .but-nav ul li.font {
            background-image: url("../img/font.png");
        }

        .main .box .box-right .sendto .but-nav ul li.face {
            background-image: url("../img/face.png");
        }

        .main .box .box-right .sendto .but-nav ul li.cut {
            background-image: url("../img/cut.png");
        }

        .main .box .box-right .sendto .but-nav ul li.page {
            background-image: url("../img/page.png");
        }

        .main .box .box-right .sendto .but-nav ul li.old {
            background-image: url("../img/old.png");
        }

        .main .box .box-right .sendto .but-text textarea {
            border: none;
            font-size: 22px;
            width: 600px;
            height: 100px;
            margin: 20px 0;
        }

        .main .box .box-right .sendto .but-text .button {
            float: right;
            padding: 5px 25px;
            background-color: #3bb4f2;
            margin-right: 20px;
        }

        .main .box .box-explain {
            float: left;
            width: 150px;
            border: #2E2D3C 1px;
            margin: 10px;
            height: 100%;
        }

        .main .box .box-explain .sendtos p {
            font-size: 18px;
            margin-left: 20px;
            width: 180px;
            margin-top: 20px;
        }

        .main .box .box-explain .sendtos textarea {
            border: #2E2D3C 2px;
            font-size: 15px;
            margin-left: 20px;
            margin-top: 10px;
            width: 180px;
            height: 240px;
        }

        .main .box .box-explain .sendtos button {
            font-size: 15px;
            margin-left: 20px;
            margin-top: 20px;
            width: 180px;
        }
    </style>
    <!-- END HEADER -->
    <title>聊天信息</title>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet">
    <link rel="stylesheet" href="${base}/resources/css/admin/css/reset.min.css">
</head>
<body>

<div class="main">
    <div class="box">
        <div class="chat-list">
        </div>
        <div class="box-right">
            <div class="recvfrom">
                <div class="nav-top">
                    <p id="topNick"></p>
                </div>
                <div class="news-top">
                    <ul class="msgUl">
                    </ul>
                </div>
            </div>
            <div class="sendto">
                <div class="but-nav">
                    <ul>
                        <li class="font"></li>
                        <li class="face"></li>
                        <li class="cut"></li>
                        <li class="page"></li>
                        <li class="old"></li>
                    </ul>
                </div>
                <div class="but-text">
                    <textarea id="msgText" cols="110" rows="6"></textarea>
                    <a href="#" class="button btn btn-success" onclick="send()">发送</a>
                </div>
            </div>
        </div>
        <div class="box-explain">
            <div class="sendtos">
                <p>患者诊断情况</p>
                <textarea rows="10" id='explainsText' name="editor" type="text"></textarea>
                [#--                <button class="btn btn-success" type="submit">保存</button>--]
                <button class="btn btn-success" onclick="saveExplains()" type="button">保存</button>
                [#--<a href="#" class="button" onclick="send()">保存</a>--]
            </div>
        </div>

    </div>


</div>
<script src="${base}/resources/js/admin/js/chat.js"></script>
<script src="${base}/resources/js/admin/js/tim-js.js"></script>
<script src="${base}/resources/js/admin/js/cos-js-sdk-v5.js"></script>
<!-- BEGIN Script -->
[#include "/admin/include/script.ftl"]
<!-- END Script -->
<script>
    let userId = '';
    // 遍历im用户得到用户头像
    let imUserMap = new Map();
    [#list imUsers as i]
    imUserMap.set("${i.id}", "${i.nickName},${i.avatar}");
    [/#list]
    console.info("imUsers", imUserMap);
    console.info("imUsers", imUserMap.get(1));
    let options = {
        SDKAppID: 1400304789 // 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID
    };
    // 创建 SDK 实例，TIM.create() 方法对于同一个 SDKAppID 只会返回同一份实例
    let tim = TIM.create(options); // SDK 实例通常用 tim 表示

    // 设置 SDK 日志输出级别，详细分级请参见 setLogLevel 接口的说明
    tim.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
    // tim.setLogLevel(1); // release 级别，SDK 输出关键信息，生产环境时建议使用

    function saveExplains() {
        let exDoc = document.getElementById('explainsText');
        let text = exDoc.value;
        if (text) {
            $.ajax({
                url: 'addExplains.jhtml',
                type: 'post',
                data: {'explains': text, 'imUserId': userId},
                success: function (e) {
                    alert('保存成功')
                },
                error: function (e) {
                    alert('保存失败')
                }
            })
        } else {
            alert('内容不能为空')
        }
    }

    // 注册 COS SDK 插件
    var cos = new COS({
        getAuthorization: function (options, callback) {
            // 异步获取临时密钥
            $.get('http://example.com/server/sts.php', {
                bucket: options.Bucket,
                region: options.Region,
            }, function (data) {
                var credentials = data && data.credentials;
                if (!data || !credentials) return console.error('credentials invalid');
                callback({
                    TmpSecretId: credentials.tmpSecretId,
                    TmpSecretKey: credentials.tmpSecretKey,
                    XCosSecurityToken: credentials.sessionToken,
                    // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
                    StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
                    ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000900
                });
            });
        }
    })
    tim.registerPlugin({'cos-js-sdk': cos});

    // 接下来可以通过 tim 进行事件绑定和构建 IM 应
    let login = tim.login({
        userID: '${(imUser.id)!''}',
        userSig: '${(imUser.userSign)!''}'
    }).catch(function (imError) {
        console.warn('login error:', imError); // 登录失败的相关信息
    });

    //监听登录
    login.then(function (imResponse) {
        console.info('登录成功')
        console.log(imResponse.data); // 登录成功
        let onMessageReceived = function (event) {
            // event.data - 存储 Message 对象的数组 - [Message]
            console.info('接收到信息啦', event)
            // 发消息人头像
            var otherAvatar = $(".list-box.select").children("img").attr("src");
            console.info("src", otherAvatar);
            // 发消息人昵称
            var nickName = $(".list-box.select>div>p").filter(".title").html();
            console.info("nick", nickName);
            var curSelect = $(".list-box.select").attr("data-id");
            var receiveHtml = '';
            for (var i = 0; i < event.data.length; i++) {
                if (event.data[i].conversationID == curSelect) {
                    receiveHtml += ' <li class="other">' +
                        '<div class="avatar"><img src="' + otherAvatar + '" alt=""></div>' +
                        '<div class="msg">' +
                        '<p class="msg-name">' + nickName + '</p>' +
                        '<p class="msg-text">' + event.data[i].payload.text + '</p>' +
                        '<time>' + timestampToTime(event.data[i].time * 1000) + '</time>' +
                        '</div></li>';
                    $(".msgUl").append(receiveHtml);
                }
            }
            ;
            tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);
        }
    });
    // 申明会话id数组
    var cIDArr = [];

    // 监听事件，例如：
    tim.on(TIM.EVENT.SDK_READY, function (event) {
        // 收到离线消息和会话列表同步完毕通知，接入侧可以调用 sendMessage 等需要鉴权的接口
        // event.name - TIM.EVENT.SDK_READY
        console.info("offline", event)
        if (cIDArr.length > 0) {
            let msgHistory = tim.getMessageList({
                conversationID: $(".list-box.select").attr("data-id"),
                count: 15
            });
            msgHistory.then(function (imResponse) {
                console.info('历史消息', imResponse);
                var msgHtml = '';
                const messageList = imResponse.data.messageList; // 消息列表。
                // 发消息人头像
                var otherAvatar = $(".list-box.select").children("img").attr("src");
                console.info("src", otherAvatar);
                // 发消息人昵称
                var nickName = $(".list-box,.select>div>p").filter(".title").html();
                console.info("nick", nickName);
                for (let i of imResponse.data.messageList) {
                    if (i.flow == 'out') {
                        msgHtml += ' <li class="self">\n' +
                            '<div class="avatar"><img src="${(imUser.avatar)!''}" alt=""></div>' +
                            '<div class="msg">' +
                            '<p class="msg-name">${imUser.nickName}</p>' +
                            '<p class="msg-text">' + i.payload.text + '</p>' +
                            '<time>' + timestampToTime(i.time * 1000) + '</time>' +
                            '</div></li>';
                    } else {
                        msgHtml += ' <li class="other">' +
                            '<div class="avatar"><img src="' + otherAvatar + '" alt=""></div>' +
                            '<div class="msg">' +
                            '<p class="msg-name">' + nickName + '</p>' +
                            '<p class="msg-text">' + i.payload.text + '</p>' +
                            '<time>' + timestampToTime(i.time * 1000) + '</time>' +
                            '</div></li>';
                    }
                }
                $(".msgUl").html(msgHtml);
                console.info("msgHtml", msgHtml);
            });
        }
    });

    tim.on(TIM.EVENT.MESSAGE_RECEIVED, function (event) {
        // 收到推送的单聊、群聊、群提示、群系统通知的新消息，可通过遍历 event.data 获取消息列表数据并渲染到页面
        // event.name - TIM.EVENT.MESSAGE_RECEIVED
        // event.data - 存储 Message 对象的数组 - [Message]
        console.info("received", event);
        // 发消息人头像
        var otherAvatar = $(".list-box.select").children("img").attr("src");
        console.info("src", otherAvatar);
        // 发消息人昵称
        var nickName = $(".list-box.select>div>p").filter(".title").html();
        console.info("nick", nickName);
        var curSelect = $(".list-box.select").attr("data-id");
        var receiveHtml = '';
        for (var i = 0; i < event.data.length; i++) {
            if (event.data[i].conversationID == curSelect) {
                receiveHtml += ' <li class="other">' +
                    '<div class="avatar"><img src="' + otherAvatar + '" alt=""></div>' +
                    '<div class="msg">' +
                    '<p class="msg-name">' + nickName + '</p>' +
                    '<p class="msg-text">' + event.data[i].payload.text + '</p>' +
                    '<time>' + timestampToTime(event.data[i].time * 1000) + '</time>' +
                    '</div></li>';
                $(".msgUl").append(receiveHtml);
            }
        }
    });

    tim.on(TIM.EVENT.CONVERSATION_LIST_UPDATED, function (event) {
        // 收到会话列表更新通知，可通过遍历 event.data 获取会话列表数据并渲染到页面
        // event.name - TIM.EVENT.CONVERSATION_LIST_UPDATED
        // event.data - 存储 Conversation 对象的数组 - [Conversation]
        console.info("conversation", event);
        for (var i = 0; i < event.data.length; i++) {
            if (i == 0) userId = event.data[i].userProfile.userID;
            var cID = (event.data[i].conversationID).toString();
            if (cIDArr.indexOf(cID) == -1) {
                userId = event.data[i].userProfile.userID;
                var peopleHtml = '';
                cIDArr.push(event.data[i].conversationID);
                peopleHtml += '<div class="list-box" data-id="' + event.data[i].conversationID + '" onclick="changeSel(this)">' +
                    '<img class="chat-head" ' +
                    // 'src="http://thirdwx.qlogo.cn/mmopen/vi_32/C7wnjeH6u90OAUC0rMHSUKGr4V2fNEicr40dkfUlX79ZsHZKbIiaZSqG9Ia55yHU3KcGh34UcXiczIs6bxPpj970g/132" alt="">' +
                    'src="' + imUserMap.get(event.data[i].userProfile.userID).split(",")[1] + '" alt="">' +
                    '<div class="chat-rig" data-id="' + event.data[i].userProfile.userID + '">' +
                    // '<p class="title">' + event.data[i].userProfile.userID +
                    '<p class="title">' + imUserMap.get(event.data[i].userProfile.userID).split(",")[0] + '</p>' +
                    '<p class="text">' + event.data[i].lastMessage.payload.text + '</p></div></div>';
                $(".chat-list").append(peopleHtml);
            }
        }
        // 把第一个设置为默认点击
        if ($(".list-box.select").length == 0) {
            $(".list-box").eq(0).addClass("select");
        }
    });

    tim.on(TIM.EVENT.ERROR, function (event) {
        // 收到 SDK 发生错误通知，可以获取错误码和错误信息
        // event.name - TIM.EVENT.ERROR
        // event.data.code - 错误码
        // event.data.message - 错误信息
        console.info("error", event)
    });

    tim.on(TIM.EVENT.SDK_NOT_READY, function (event) {
        // 收到 SDK 进入 not ready 状态通知，此时 SDK 无法正常工作
        // event.name - TIM.EVENT.SDK_NOT_READY
        console.info("state", event);
        tim.login({
            userID: '${(imUser.id)!''}',
            userSig: '${(imUser.userSign)!''}'
        }).catch(function (imError) {
            console.warn('login error:', imError); // 登录失败的相关信息
        })
    });

    let onMessageReceived = function (event) {
        // 收到推送的单聊、群聊、群提示、群系统通知的新消息，可通过遍历 event.data 获取消息列表数据并渲染到页面
        // event.name - TIM.EVENT.MESSAGE_RECEIVED
        // event.data - 存储 Message 对象的数组 - [Message]
        console.info("onMessage", event);
    };
    tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived);

    function send() {
        let message = tim.createTextMessage({
            to: $(".list-box.select").children("div").attr("data-id"),
            conversationType: TIM.TYPES.CONV_C2C,
            // 消息优先级，用于群聊（v2.4.2起支持）。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息，详细请参考：https://cloud.tencent.com/document/product/269/3663#.E6.B6.88.E6.81.AF.E4.BC.98.E5.85.88.E7.BA.A7.E4.B8.8E.E9.A2.91.E7.8E.87.E6.8E.A7.E5.88.B6)
            // 支持的枚举值：TIM.TYPES.MSG_PRIORITY_HIGH, TIM.TYPES.MSG_PRIORITY_NORMAL（默认）, TIM.TYPES.MSG_PRIORITY_LOW, TIM.TYPES.MSG_PRIORITY_LOWEST
            // priority: TIM.TYPES.MSG_PRIORITY_NORMAL,
            payload: {
                text: $("#msgText").val()
            }
        });
        // 2. 发送消息
        let sendMsg = tim.sendMessage(message);
        sendMsg.then(function (imResponse) {
            // 发送成功
            console.info("发送成功", imResponse);
            var sendHtml = ' <li class="self">\n' +
                '<div class="avatar"><img src="${(imUser.avatar)!''}" alt=""></div>' +
                '<div class="msg">' +
                '<p class="msg-name">${imUser.nickName}</p>' +
                '<p class="msg-text">' + imResponse.data.message.payload.text + '</p>' +
                '<time>' + timestampToTime(imResponse.data.message.time * 1000) + '</time>' +
                '</div></li>';
            $(".msgUl").append(sendHtml);
            $("#msgText").val('');
        }).catch(function (imError) {
            // 发送失败
            console.warn('sendMessage error:', imError);
        });

    }


    // 时间格式化
    function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        // var  date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000

        var yyyy = date.getFullYear() + '-';

        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';

        // var dd = date.getDate() + ' ';
        var dd = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';

        // var HH = date.getHours() + ':';
        var HH = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';

        // var mm = date.getMinutes() + ':';
        var mm = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';

        // var ss = date.getSeconds();
        var ss = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());

        return yyyy + MM + dd + HH + mm + ss;
    }

    function changeSel(obj) {
        // console.info("this", $(obj));
        console.log(uaerInfo)
        alert('')
        $(obj).siblings("div").removeClass("select");
        $(obj).addClass("select");
        if (cIDArr.length > 0) {
            let msgHistory = tim.getMessageList({
                conversationID: $(obj).attr("data-id"),
                count: 15
            });
            msgHistory.then(function (imResponse) {
                console.info('历史消息', imResponse);
                var msgHtml = '';
                const messageList = imResponse.data.messageList; // 消息列表。
                // 发消息人头像
                var otherAvatar = $(".list-box.select").children("img").attr("src");
                console.info("src", otherAvatar);
                // 发消息人昵称
                var nickName = $(".list-box.select>div>p").filter(".title").html();
                console.info("nick", nickName);
                for (let i of messageList) {
                    if (i.flow == 'out') {
                        msgHtml += ' <li class="self">\n' +
                            '<div class="avatar"><img src="${(imUser.avatar)!''}" alt=""></div>' +
                            '<div class="msg">' +
                            '<p class="msg-name">${imUser.nickName}</p>' +
                            '<p class="msg-text">' + i.payload.text + '</p>' +
                            '<time>' + timestampToTime(i.time * 1000) + '</time>' +
                            '</div></li>';
                    } else {
                        msgHtml += ' <li class="other">' +
                            '<div class="avatar"><img src="' + otherAvatar + '" alt=""></div>' +
                            '<div class="msg">' +
                            '<p class="msg-name">' + nickName + '</p>' +
                            '<p class="msg-text">' + i.payload.text + '</p>' +
                            '<time>' + timestampToTime(i.time * 1000) + '</time>' +
                            '</div></li>';
                    }
                }
                $(".msgUl").html(msgHtml);
                console.info("msgHtml", msgHtml);
            });
        }
    }
</script>
</body>
</html>